<template>
	<view>
		<up-navbar title="我的" :bgColor="bgColor" fixed placeholder :autoBack="false" leftIconSize="0" leftIconColor="#fff" titleStyle="color:#fff"></up-navbar>
		<view class="main-top u-p-b-40 u-p-l-40 u-p-r-40 u-rela">
			<view class="u-flex u-flex-items-center u-flex-between ">
				<view class="u-flex u-flex-items-center">
					<view class="u-rela">
						<up-avatar :src="userInfo.avatar" size="60"></up-avatar>
						<!-- <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-cover u-flex u-flex-center u-abso">
							<up-icon name="camera" color="#fff" size="22"></up-icon>
						</button> -->
					</view>
					<view class="u-m-l-20">
						<p>{{userInfo.nick_name||'待完善'}}</p>
						<p class="u-font-26 u-m-t-10">美好的事情，在此发生~</p>
					</view>
				</view>
				<view class="u-nav-slot" @click="toUserInfo">
					<up-icon name="edit-pen" color="#fff" size="18"></up-icon>
					<text class="u-m-l-10 u-p-t-4">完善信息</text>
				</view>
			</view>
			<up-row v-if="account" customStyle="margin-top: 40rpx">
				<up-col span="4">
					<view class="u-text-center" @click="toBuyHistory">
						<p class="u-font-46">{{account.lucky_join_count||'0'}}<text class="u-font-22 u-m-l-4">次</text></p>
						<p class="u-m-t-8 u-font-28">抽奖次数</p>
					</view>
				</up-col>
				<up-col span="4">
					<view class="u-text-center middle-item">
						<p class="u-font-46">{{account.lucky_draw_count||'0'}}<text class="u-font-22 u-m-l-4">次</text></p>
						<p class="u-m-t-8 u-font-28">中奖次数</p>
					</view>
				</up-col>
				<up-col span="4">
					<view class="u-text-center" @click="toCoinHistory">
						<p class="u-font-46">{{account.integral||'0'}}<text class="u-font-22 u-m-l-4">个</text></p>
						<p class="u-m-t-8 u-font-28">幸运星</p>
					</view>
				</up-col>
			</up-row>
		</view>
		<up-gap height="10" bgColor="#fafafa"></up-gap>
		<view class="u-p-l-30 u-p-r-30">
			<view class="u-flex u-flex-between u-p-t-30 u-p-b-30 u-border-bottom" @click="openShare">
				<view class="u-flex u-flex-center u-flex-middle">
					<image src="@/static/icon/i-4.png" mode="widthFix" style="width: 44rpx;height: 44rpx;"></image>
					<text class="u-m-l-10 u-font-28">邀请好礼</text>
				</view>
				<view class="u-flex u-flex-center u-flex-middle">
					<text class="u-m-r-10 u-font-24 u-error-dark">+50星/人</text>
					<up-icon name="arrow-right" color="#ccc"></up-icon>
				</view>
			</view>
			<view class="u-flex u-flex-between u-p-t-30 u-p-b-30 u-border-bottom" @click="toBuyHistory">
				<view class="u-flex u-flex-center u-flex-middle">
					<image src="@/static/icon/i-3.png" mode="widthFix" style="width: 44rpx;height: 44rpx"></image>
					<text class="u-m-l-12 u-font-28">我的抽奖</text>
				</view>
				<view class="u-flex u-flex-center u-flex-middle">
					<up-icon name="arrow-right" color="#ccc"></up-icon>
				</view>
			</view>
			<!-- <view class="u-flex u-flex-between u-p-t-30 u-p-b-30 u-border-bottom">
				<view class="u-flex u-flex-center u-flex-middle">
					<image src="@/static/icon/i-1.png" mode="widthFix" style="width: 44rpx;height: 44rpx"></image>
					<text class="u-m-l-12 u-font-28">我的中奖</text>
				</view>
				<view class="u-flex u-flex-center u-flex-middle">
					<up-icon name="arrow-right" color="#ccc"></up-icon>
				</view>
			</view> -->
			<view class="u-flex u-flex-between u-p-t-30 u-p-b-30 u-border-bottom" @click="getAddress">
				<view class="u-flex u-flex-center u-flex-middle">
					<image src="@/static/icon/i-5.png" mode="widthFix" style="width: 44rpx;height: 44rpx"></image>
					<text class="u-m-l-12 u-font-28">收获地址</text>
				</view>
				<view class="u-flex u-flex-center u-flex-middle">
					<!-- <text class="u-m-r-10 u-font-24 u-error-dark">+10星/人</text> -->
					<up-icon name="arrow-right" color="#ccc"></up-icon>
				</view>
			</view>
			<button open-type="contact" class="u-flex u-flex-between contact-btn u-p-t-30 u-p-b-30">
				<view class="u-flex u-flex-center u-flex-middle">
					<image src="@/static/icon/i-2.png" mode="widthFix" style="width: 44rpx;height: 44rpx"></image>
					<text class="u-m-l-12 u-font-28">联系我们</text>
				</view>
				<view class="u-flex u-flex-center u-flex-middle">
					<!-- <text class="u-m-r-10 u-font-24 u-error-dark">+10星/人</text> -->
					<up-icon name="arrow-right" color="#ccc"></up-icon>
				</view>
			</button>
		</view>
		<up-gap height="10" bgColor="#fafafa"></up-gap>
		<!-- <view class="u-p-l-80 u-p-r-80 u-m-l-80 u-m-r-80 u-m-t-80">
			<view class="u-p-l-80 u-p-r-80">
				<up-divider text="千链科技出品" :hairline="true"></up-divider>
			</view>
			<p class="u-font-22 u-text-center u-info-light" style="margin-top: -30rpx;">每天超3万人使用</p>
		</view> -->
		<up-popup :show="state.inviteShow" :round="10" mode="bottom" :closeable="false" @close="close">
			<view class="u-p-50">
				<up-steps current="-1" activeColor="#f78d94" inactiveColor="#f78d94">
					<up-steps-item title="分享邀请链接">
						<template #icon>
							<up-icon name="share-square" size="26"></up-icon>
						</template>
					</up-steps-item>
					<up-steps-item title="好友点击进入">
						<template #icon>
							<up-icon name="plus-people-fill" size="26"></up-icon>
						</template>
					</up-steps-item>
					<up-steps-item title="获得50幸运星">
						<template #icon>
							<up-icon name="integral" size="26"></up-icon>
						</template>
					</up-steps-item>
				</up-steps>
				<p class="u-text-center u-light-color u-p-t-30 u-m-b-50 u-font-26">温馨提示：被邀请的好友是未使用过该小程序的新用户</p>
				<up-button type="error" open-type="share" icon="weixin-fill" shape="circle" text="分享给好友"></up-button>
			</view>
		</up-popup>
		<up-popup :show="state.contactShow" :round="10" mode="bottom" :closeable="true" @close="close">
			<view class="u-p-50">
				<view class="u-flex u-flex-center"><image src="@/static/wx.png" showMenuByLongpress mode="widthFix" style="width: 200rpx;height: 200rpx"></image></view>
				<p class="u-text-center u-p-t-20 u-font-28">长按识别二维码咨询官方客服</p>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { onLoad, onShow} from '@dcloudio/uni-app'
	import { ref,reactive,onMounted,defineEmits } from 'vue'
	import {
	  BASE_URL,
	  REQUEST_SUCCESS
	} from '@/utils/config.js';
	import {
	  useAuth
	} from '/composables/useAuth';
	import {
	  useCommon
	} from '/composables/useCommon.js';
	import {
	  useStore
	} from 'vuex';
	import createApi from '/api/commonAPI.js';
	const commonAPI = createApi(store);
	const store = useStore();

	// 定义可以向父组件发送的事件
	const emits = defineEmits(['open-signIn']);
	const bgColor = ref('#f15e69');
	const {
	  token,
	  user_id,
	  userInfo,
	  hasAuth,
	  account,
	  logout,
	  refreshAppId,
	  getUserAccount
	} = useAuth();
	const state = reactive({
	  // src: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Urib8DicwBmcibiamibxVysZr5kR1WhACQX6xiakKHDKsM0ddQNkibAdjhXPQjmFaKhZnStEFOHxPutbAMmEWPs70Voce52z7dPCNwb45Zp4bUQmdg/132',
	  inviteShow: false,
	  contactShow: false,
	})

	function signIn() {
	  // 触发 'open-signIn' 事件
	  emits('open-signIn');
	}

	const close = () => {
	  state.inviteShow = false
	  state.contactShow = false
	}
	//获取用户账户余额和参与活动计数
	onMounted(async ()=>{
		getUserAccount()
		// const res = await commonAPI.userAccount()
		// if(res.code === REQUEST_SUCCESS){
		// 	store.commit('SET_ACCOUNT',res.data)
		// }
		
	})
	function openShare() {
	  state.inviteShow = true
	}
	const toUserInfo = () =>{
		uni.navigateTo({
			url:'/pages/userCenter/userInfo'
		})
	}
	function getAddress() {
	  uni.chooseAddress({
		success: (res) => {
		  console.log('地址选择成功', res);
		},
		fail: (err) => {
		  console.error('地址选择失败', err);
		  if (err.errMsg.includes('cancel')) {
			// uni.showToast({ title: '您取消了选择', icon: 'none' });
		  }
		}
	  });
	}
	function toBuyHistory() {
	  uni.navigateTo({
		url: '/pages/userCenter/buyHistory'
	  });
	}
	function toCoinHistory() {
	  uni.navigateTo({
		url: '/pages/userCenter/coinHistory'
	  });
	}
</script>
<style lang="scss" scoped>
	.avatar-cover{
		background-color: rgba(0,0,0,.3);
		top:0;
		right: 0;
		left:0;
		bottom:0;
		border-radius: 100%;
	}
	.main-top{
		background-color: #f15e69;
		color: #fff;
	}
	.u-nav-slot{
		border:1px solid rgba(255,255,255,.2);
		border-radius:30rpx;
		height:50rpx;
		padding:0 10rpx;
		color:#fff;
		font-size: 24rpx;
		background-color: rgba(255,255,255,.1);
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 34rpx;
			height: 34rpx;
			display: block;
		}
	}
	.middle-item{
		border: 1px solid rgb(255,255,255,.1);
		border-width: 0 1px;
	}
	.contact-btn{
		border: 0;
		padding:0;
		outline: 0;
		background-color: transparent;
		&::after{
			display: none;
		}
	}
</style>